<template>
  <div class="comment">
    <h3 class="title">酒店评论</h3>
    <!-- 进度条 -->
    <el-row>
      <el-col :span="4" class="progress">
        <!-- 环形进度条 -->
        <el-progress
          type="circle"
          :percentage="(data.stars / 5) * 100"
          :show-text="false"
          color="#1d6497"
          :width="100"
          :stroke-width="8"
        ></el-progress>
        <div class="stars">
          <span>{{ data.stars }}</span> 分
        </div>
        <div class="all_r">
          共有<span>{{ data.all_remarks }}</span
          >人点评
        </div>
      </el-col>
      <el-col :span="20">
        <div class="score">
          <div class="score_e">
            <div>
              <el-progress
                :stroke-width="10"
                :percentage="(data.scores.environment / 10) * 100"
                color="#1d6497"
                class="score_r"
                :show-text="false"
              ></el-progress>
            </div>
            <div class="score_text">环境：{{ data.scores.environment }}</div>
          </div>
          <div class="score_e">
            <el-progress
              :stroke-width="10"
              :percentage="(data.scores.product / 10) * 100"
              color="#1d6497"
              class="score_r"
              :show-text="false"
            ></el-progress>
            <div class="score_text">产品：{{ data.scores.product }}</div>
          </div>
          <div class="score_e">
            <el-progress
              :stroke-width="10"
              :percentage="(data.scores.service / 10) * 100"
              color="#1d6497"
              class="score_r"
              :show-text="false"
            ></el-progress>
            <div class="score_text">服务：{{ data.scores.service }}</div>
          </div>
        </div>
      </el-col>
    </el-row>
    <!-- 评论区 -->
    <el-row class="remarks">
      <el-col :span="4">评论推荐</el-col>
      <el-col :span="20">
        <ul class="">
          <el-button type="primary" plain
            >所有评论{{ data.all_remarks }}</el-button
          >
          <el-button type="primary" plain
            >推荐{{ data.common_remarks }}</el-button
          >
          <el-button type="warning"
            >非常好{{ data.very_good_remarks }}</el-button
          >
          <el-button type="warning" plain
            >好评{{ data.good_remarks }}</el-button
          >
          <el-button type="info">差评{{ data.bad_remarks }}</el-button>
          <el-button type="info" plain
            >非常差{{ data.very_bad_remarks }}</el-button
          >
        </ul>
      </el-col>
    </el-row>
  </div>
</template>

<script>
export default {
  props: {
    data: {
      type: Object,
      default() {
        return {};
      },
    },
  },
  mounted() {
    console.log(this.data);
  },
};
</script>

<style lang="less" scoped>
.comment {
  margin-bottom: 40px;
  .title {
    margin: 20px 0 30px 0;
    color: #666;
    font-size: 16px;
  }
  .progress {
    position: relative;
    .stars {
      position: absolute;
      top: 52px;
      left: 52px;
      transform: translate(-50%, -50%);
      > span {
        font-size: 26px;
        color: #1d6497;
        font-weight: 700;
      }
    }
    .all_r {
      margin-top: 10px;
      > span {
        color: #1d6497;
        font-weight: 700;
      }
    }
  }
  .score {
    position: relative;
    width: 800px;
    .score_e {
      position: relative;
      // display: flex;
      // justify-content: start;
      // align-items: flex-start;
      > div {
        width: 400px;
      }
      .score_r {
        margin-bottom: 40px;
      }
      .score_text {
        position: absolute;
        right: -15px;
        top: -8px;
        font-size: 14px;
      }
    }
  }
  .remarks {
    padding-bottom: 30px;
    margin-top: 30px;
    border-bottom: 1px solid #ccc;
  }
}
</style>